<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Manage TemplateDoc</title>
<script>
// 假设的初始templateDoc数组
let templateDoc = [
    { para: { type: "Text", content: "hello\ngirl\n", url: "" } },
    { para: { type: "Text", content: "welcome to china!\nthank!\n", url: "" } },
    { para: { type: "Text", content: "New paragraph here.\nContinue here.", url: "" } }
];

function displayTemplateDoc() {
    const display = document.getElementById('display');
    display.innerHTML = ''; // 清空当前显示

    for (let item of templateDoc) {
        const element = document.createElement('div'); // Container for each para, ensures order
        if (item.para.type === "Image") {
            const img = new Image();
            img.src = item.para.url;
            img.alt = item.para.content;
            img.onload = function() {
                // Image ready to display at original size
            };
            element.appendChild(img);
            element.appendChild(document.createElement('br')); // Ensures a break after each image
        } else {
            const textNode = document.createTextNode(`Index: ${item.para.type} - ${item.para.content.replace(/\n/g, '\\n')}`);
            element.appendChild(textNode);
        }
        display.appendChild(element);
    }
}

function modifyItem() {
    const index = templateDoc.findIndex(item => item.para.content.includes("welcome to china!"));
    if (index !== -1) {
        templateDoc[index].para.content = "Updated content\nNew line";
    }
    displayTemplateDoc();
}

function deleteItem() {
    const index = templateDoc.findIndex(item => item.para.content.includes("welcome to china!"));
    if (index !== -1) {
        templateDoc.splice(index, 1);
    }
    displayTemplateDoc();
}

function addItem() {
    const inputText = "This is a test\n\n\nThis should be a new paragraph\nAnd this is part of it.";
    const parts = inputText.split(/\n{3,}/);
    parts.forEach(part => {
        const formattedPart = part.replace(/\n{2,}/g, '\n');
        templateDoc.push({ para: { type: "Text", content: formattedPart, url: "" } });
    });
    displayTemplateDoc();
}

function addTable() {
    const inputText = "This is a test\n\n\nThis should be a new paragraph\nAnd this is part of it.";
    const parts = inputText.split(/\n{3,}/);
    parts.forEach(part => {
        const formattedPart = part.replace(/\n{2,}/g, '\n');

        /*
        "para": {
             "type": "table",
             "content": "这是表格",
             "tableId": "EC09E0DE-59C0-02D5-EA66-7ED4403859DC",
             "rect": {
                    "left": 10,
                    "top": 0,
                    "right": 138.0625,
                    "bottom": 60
                  }
               }
        */
        templateDoc.push({ para: { type: "table", content: formattedPart, url: "" } });
    });
    displayTemplateDoc();
}


function addImage() {
    const imageUrl = "../imgs/addindent.png";
    if (imageUrl) {
        templateDoc.push({
            para: {
                type: "Image",
                content: "这是一张图片",
                url: imageUrl
            }
        });
        displayTemplateDoc();
    }
}

window.onload = displayTemplateDoc; // 初始显示
</script>
</head>
<body>
<h1>Manage TemplateDoc</h1>
<div id="display"></div>
<button onclick="modifyItem()">Modify Item</button>
<button onclick="deleteItem()">Delete Item</button>
<button onclick="addItem()">Add Item</button>
<button onclick="addImage()">Add Image</button>
<button onclick="addTable()">Add Image</button>
</body>
</html>
